<template>
  <div class="container">
    <div class="table">
      <iTable :table="dataTable">
        <template slot-scope="props"
                  slot="action">
          <el-button type="text"
                     @click="goDetail(props.obj.row)"
                     size="small"
                     class="detial-btn">{{$t('page.view')}}</el-button>
          <el-button type="text"
                     @click="downloadExl(props.obj.row,0)"
                     size="small"
                     class="detial-btn">{{$t('page.download')}}</el-button>
          <el-button type="text"
                     @click="downloadExl(props.obj.row,1)"
                     size="small"
                     class="detial-btn">{{$t('page.export')}}</el-button>
        </template>
      </iTable>

      <div class="Pagination"
           style="text-align: left;margin-top: 10px;">
        <el-pagination v-if="pageshow"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-size="limit"
                       layout="total, prev, pager, next"
                       :total="count">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { fetchHistoryList } from '@/api/table'
import iTable from '@/components/Table'
import format from 'date-format'

export default {
  name: '',
  data() {
    return {
      //总页码
      count: 0,
      //单页行数
      limit: 20,
      //页码
      currentPage: 1,
      pageshow: false,
      dataTable: {
        loading: false,
        border: true,
        hasOperation: false,
        tr: [
          {
            id: '2',
            label: this.$t('page.time'),
            prop: 'uploadTime',
            show: true,
          },
          // {
          //   id: "5",
          //   label: "手机号",
          //   prop: "userName",
          //   show: true,
          // },
          {
            id: '1',
            label: this.$t('page.file'),
            prop: 'fileName',
            show: true,
          },
          {
            id: '4',
            label: this.$t('page.operation'),
            prop: 'action',
            show: 'template',
          },
        ],
        data: [],
        operation: {},
      },
    }
  },
  components: {
    iTable,
  },
  mounted() {
    this.getHistoryList()
  },
  methods: {
    //时间格式化
    formatterTime(t) {
      if (t) {
        const newTime = format('yyyy-MM-dd hh:mm:ss', new Date(t)).split(' ')
        let time = ''
        time += newTime[0] + '\xa0' + newTime[1]
        return time
      } else {
        return ''
      }
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getHistoryList()
    },
    async getHistoryList() {
      this.dataTable.loading = true
      const res = await fetchHistoryList({
        type: 1,
      })
      this.dataTable.loading = false
      this.dataTable.data = []
      this.count = res.data.length
      if (this.count <= this.limit) {
        this.pageshow = false
      } else {
        this.pageshow = true
      }
      res.data.forEach((item) => {
        const data = {}
        data.userName = item.userName
        data.id = item.id
        if (item.fileName.split('').length > 20) {
          data.fileName = item.fileName.substring(0, 20) + '...'
        } else {
          data.fileName = item.fileName
        }
        data.uuid = item.uuid
        data.uploadTime = this.formatterTime(item.uploadTime)
        this.dataTable.data.push(data)
      })

      //前端分页
      this.dataTable.data = this.dataTable.data.slice(
        (this.currentPage - 1) * this.limit,
        this.currentPage * this.limit
      )
    },
    downloadExl(row, type) {
      const href = `${process.env.BASE_URL}receive/download/excel/${type}/${row.uuid}`
      window.open(href, '_blank')
    },
    goDetail(data) {
      this.$router.push({
        path: '/aDetail',
        query: { name: data.fileName, id: data.id, time: data.uploadTime },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.table {
  padding: 20px;
}
.detial-btn {
  padding: 0 15px;
}
</style>